<div tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true" id="avatar-modal" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="post" enctype="multipart/form-data" action="{{ url(['for':'userCenterCropFace']) }}" class="avatar-form ng-pristine ng-valid">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" class="close">×</button>
                    <h4 id="avatar-modal-label" class="modal-title">更换头像</h4>
                </div>
                <div class="modal-body">
                    <div class="avatar-body">
                        <!-- Upload image and data -->
                        <div class="avatar-upload">
                            <input type="hidden" name="avatar_src" class="avatar-src">
                            <input type="hidden" name="avatar_data" class="avatar-data">
                            <label for="avatarInput">头像上传</label>
                            <input type="file" name="avatar_file" id="avatarInput" class="avatar-input">
                        </div>
                        <!-- Crop and preview -->
                        <div class="row">
                            <div class="col-md-9">
                                <div class="avatar-wrapper"></div>
                            </div>
                            <div class="col-md-3">
                                <div class="avatar-preview preview-lg"></div>
                                <div class="avatar-preview preview-md"></div>
                                <div class="avatar-preview preview-sm"></div>
                            </div>
                        </div>
                        <div class="row avatar-btns">
                            <div class="col-md-9">
                                <div class="btn-group">
                                    <button title="向左旋转 90 ℃" type="button" data-option="-90" data-method="rotate" class="btn btn-primary">
                                        向左旋转
                                    </button>
                                    <button type="button" data-option="-15" data-method="rotate" class="btn btn-primary">-15℃
                                    </button>
                                    <button type="button" data-option="-30" data-method="rotate" class="btn btn-primary">-30℃
                                    </button>
                                    <button type="button" data-option="-45" data-method="rotate" class="btn btn-primary">-45℃
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button title="向右旋转 90 ℃" type="button" data-option="90" data-method="rotate" class="btn btn-primary">
                                        向右旋转
                                    </button>
                                    <button type="button" data-option="15" data-method="rotate" class="btn btn-primary">15℃
                                    </button>
                                    <button type="button" data-option="30" data-method="rotate" class="btn btn-primary">30℃
                                    </button>
                                    <button type="button" data-option="45" data-method="rotate" class="btn btn-primary">45℃
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <button type="submit" class="btn btn-primary btn-block avatar-save">完成
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="modal-footer">
                                      <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
                                    </div> -->
            </form>
        </div>
    </div>
</div>
<!-- /.modal -->

<!-- Loading state -->
<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>